<template>
	<div class="bear-MultiPageSelect">
		<div class="bear-head">{{checkChain|chain(nameAttr)}}</div>
		<transition
				:enter-active-class="enter"
				:leave-active-class="leave ">
			<van-checkbox-group
					class="bear-page"
					:value="value"
					:key="checkChain.length"
					icon-size="26px"
					@input="$_bear_inputFn">
				<div class="bear-item"
					 v-for="(item,index) in curList"
					 :key="index"
					 @click="$_bear_clickFn(item,index)">
					<div class="bear-left">
						<van-checkbox
								ref="checkboxes"
								:name="item"
								:disabled="item[disCheckAttr]"
								@click.native.stop
								@click="$_bear_checkFn(item,index)"/>
						<slot name="icon" :item="item">
							<i :class="item[folderAttr]?'el-icon-folder-opened':'el-icon-tickets'"></i>
						</slot>
						<span class="my-ellipsis">{{item[nameAttr]}}</span>
					</div>
					<div
						v-if="item[childrenAttr]&&item[childrenAttr].length"
						class="bear-right"><!--{{item[childrenAttr]|child}}--><van-icon name="arrow"/></div>
					<i v-else-if="hasDetail"
					   class="bear-right el-icon-more"
					   @click.stop="$_bear_detail(item)"></i>
				</div>
			</van-checkbox-group>
		</transition>
	</div>
</template>

<script>
	// eslint-disable-next-line no-unused-vars
	/* global utils */
	/**
	 * @author 唐国雄
	 * 多页面树结构选择器
	 * 属性----------------------
	 * v-model			已选中的项
	 * :name-attr		名称字段
	 * :children-attr	子级字段
	 * :folder-attr		是否是文件夹字段
	 * :check-attr		是否选中字段
	 * :dis-check-attr	是否无法选中
	 * :check-process	选中前处理
	 * :list			树结构的列表
	 * :has-detail		是否有查看详情
	 * :async			异步加载模式
	 * 插槽----------------------
	 * #icon		文件图标
	 * 事件----------------------
	 * @enter		进入下一级
	 * @detail		文件详情
	 * 方法----------------------
	 * backup()		返回上一级,返回值表示是否实际有返回操作
	 *
	 * @typedef MultiPageSelect
	 * @event MultiPageSelect#enter
	 * @event MultiPageSelect#detail
	 * @type {Object} 当前条目信息
	 */
	export default{
		name:'MultiPageSelect',
		filters:{
			child(val){
				if(Array.isArray(val)){
					return val.length;
				}
				return 0;
			},
			chain(val,nameAttr){
				return val.reduce(function(a,b,index){
					return a+(index>0?' > ':'')+b[nameAttr];
				},'');
			}
		},
		props:{
			nameAttr:{
				type:String,
				default:'name'
			},
			childrenAttr:{
				type:String,
				default:'children'
			},
			folderAttr:{
				type:String,
				default:'folder'
			},
			checkedAttr:{
				type:String,
				default:'checked'
			},
			disCheckAttr:{
				type:String,
				default:'disCheck'
			},
			/**
			 * 选中前处理
			 * @param {Object} item 当前条目信息
			 * @return {Boolean} 点击是否生效
			 */
			checkProcess:{
				type:Function,
				default(){
					return true;
				}
			},
			/**
			 * 每一项
			 * @typedef ItemObj
			 * @property {String} name 名称
			 * @property {Boolean} folder 是否是文件夹
			 * @property {Boolean} disCheck 是否无法选中
			 * @property {ItemObj[]} children 子级
			 */
			/**
			 * @type {ItemObj[]} 树结构
			 */
			list:{
				type:Array,
				default(){
					return [];
				}
			},
			// 已经选中的项
			value:{
				type:Array,
				default(){
					return [];
				}
			},
			// 是否有查看详情(3个点点)
			hasDetail:Boolean,
			// 异步加载模式
			async:Boolean
		},
		data(){
			return {
				checkChain:[],
				enter:'',
				leave:''
			};
		},
		computed:{
			curList(){
				const checkChain=this.checkChain;
				const len=checkChain.length;
				if(len){
					return checkChain[len-1][this.childrenAttr];
				}
				return this.list;
			}
		},
		methods:{
			$_bear_clickFn(item,index){
				const children=item[this.childrenAttr];
				if(
					(this.async&&item[this.folderAttr])||
					(!this.async&&children&&children.length)
				){
					this.checkChain.push(item);
					this.enter='animate__animated animate__fadeInRight';
					this.leave='absolute animate__animated animate__fadeOutLeft';
					this.$emit('enter',item);
				}else{
					const checkbox=this.$refs.checkboxes[index];
					if(this.checkProcess(item)){
						checkbox.toggle();
						this.$emit('toggle',{item,checked:!checkbox.checked});
					}
				}
			},
			// 返回上一级
			backup(){
				if(this.checkChain.length>0){
					this.checkChain.pop();
					this.enter='animate__animated animate__fadeInLeft';
					this.leave='absolute animate__animated animate__fadeOutRight';
					return true;
				}
				return false;
			},
			// 到首页
			toFirst(){
				this.checkChain=[];
			},
			$_bear_checkFn(item,index){
				const checkbox=this.$refs.checkboxes[index];
				if(!this.checkProcess(item)){
					checkbox.toggle();
				}else{
					this.$emit('toggle',{item,checked:checkbox.checked});
				}
			},
			$_bear_inputFn(e){
				this.$emit('input',e);
			},
			$_bear_detail(item){
				this.$emit('detail',item);
			}
		}
	};
</script>

<style lang="scss">
	.bear-MultiPageSelect{
		position:relative;
		overflow:hidden;
		height:100%;
		>.bear-head{
			height:30px;
			line-height:30px;
			font-size:14px;
			background:#fff;
			border-bottom:1px solid #ddd;
			white-space:nowrap;
			overflow-x:auto;
			overflow-y:hidden;
		}
		>.bear-page{
			width:100%;
			height:calc(100% - 30px);
			overflow:auto;
			&.absolute{
				position:absolute;
			}
			>.bear-item{
				background:#fff;
				display:flex;
				justify-content:space-between;
				height:60px;
				font-size:15px;
				&:active{
					background-color:#f2f3f5;
				}
				&:not(:last-child){
					border-bottom:1px solid #ddd;
				}
				>.bear-left,>.bear-right{
					display:flex;
					align-items:center;
				}
				>.bear-left{
					overflow: hidden;
					padding-right:10px;
					>.van-checkbox{
						padding:0 10px;
						height:100%;
						flex-shrink:0;
					}
					>i[class^='el-icon']{
						margin-right:5px;
						font-size:22px;
					}
				}
				>.bear-right{
					padding:0 10px;
					flex-shrink:0;
				}
				>i.bear-right{
					padding:0 15px;
				}
			}
		}
	}
</style>
